{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>表单</li>
  </ol>
<section class="demo-section">

<div id="pageContent">


<section><header><h3>基本形式</h3></header><article><p>将 <a href="#control/textbox"><strong>控件 → 表单控件</strong></a> 包裹在 <code>&lt;div class="form-group"&gt;</code> 内即可得到一个表单控件组。</p><p>表单控件组中通常还包括文本标签 <code>&lt;label&gt;</code>，<a href="#component/inputgroup"><strong>组件 → 输入组</strong></a>（<code>.input-group</code>）也可以放置在表单控件组中。</p><p>将多个表单控件组堆叠在 <code>&lt;form&gt;</code> 内即可得到一个垂直排列的表单。</p><p>按钮 <code>.btn</code> 可以直接添加到表单内。</p><div class="example">
  <form>
    <div class="form-group">
      <label for="exampleInputAccount1">账号</label>
      <input type="text" class="form-control" id="exampleInputAccount1" placeholder="电子邮件/手机号/用户名">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">密码</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="">
    </div>
    <div class="form-group">
      <label for="exampleInputMoney1">捐赠金额</label>
      <div class="input-group">
        <span class="input-group-addon">￥</span>
        <input type="number" class="form-control" id="exampleInputMoney1" placeholder="最低捐赠金额为 ￥10.00">
        <span class="input-group-addon">.00</span>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;form&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputAccount1"</span><span class="tag">&gt;</span><span class="pln">账号</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAccount1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"电子邮件/手机号/用户名"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputPassword1"</span><span class="tag">&gt;</span><span class="pln">密码</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputPassword1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputMoney1"</span><span class="tag">&gt;</span><span class="pln">捐赠金额</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;</span><span class="pln">￥</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"number"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputMoney1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"最低捐赠金额为 ￥10.00"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;</span><span class="pln">.00</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">提交</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span></code></pre></article></section>






<section><header><h3>水平排列的表单</h3></header><article><p>为 <code>&lt;form&gt;</code> 添加 <code>.form-horizontal</code> 类，并联合使用栅格相关类，可以得到一个水平布局（标签和输入框在同一行）的表单。实际上是改变了表单控件组 <code>.form-group</code> 的行为，使其表现为栅格中的行（<code>.row</code>），因此无需在表单中再次使用 <code>.row</code>。</p><p>使用要点：</p><ul>
<li>应该表单控件组中的标签 <code>&lt;label&gt;</code> 添加 <code>.col-*</code> 来设定标签的列宽；</li>
<li>输入框（包括 <code>&lt;input&gt;</code>、<code>&lt;textarea&gt;</code>、<code>&lt;select&gt;</code>）、多选框和单选框（包括 <code>.checkbox</code> 和 <code>.radio</code>）及按钮（<code>.btn</code>）必须放置在单独的额外容器 <code>&lt;div class="col-*"&gt;</code> 内来为其应用列宽；</li>
<li>如果控件组中不包括标签，可以为 <code>&lt;div class="col-*"&gt;</code> 添加 <code>.col-*-offset-*</code> 类来使其左侧在垂直方向对齐；</li>
<li>可以在一行（<code>.form-group</code>）内包含多个 <code>.col-*</code> 来同时排列多个输入框。</li>
</ul><div class="example">
  <form class="form-horizontal">
    <div class="form-group">
      <label for="exampleInputAccount4" class="col-sm-2">账号</label>
      <div class="col-md-6 col-sm-10">
        <input type="text" class="form-control" id="exampleInputAccount4" placeholder="电子邮件/手机号/用户名">
      </div>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword4" class="col-sm-2">密码</label>
      <div class="col-md-6 col-sm-10">
        <input type="password" class="form-control" id="exampleInputPassword4" placeholder="密码">
      </div>
    </div>
    <div class="form-group">
      <label for="exampleInputAddress1" class="col-sm-2">地址</label>
      <div class="col-sm-3">
        <select class="form-control" id="exampleInputAddress1">
          <option>北京</option>
          <option>上海</option>
        </select>
      </div>
      <div class="col-sm-3">
        <input type="text" class="form-control" id="exampleInputAddress2" placeholder="市/县">
      </div>
      <div class="col-sm-4">
        <input type="text" class="form-control" id="exampleInputAddress3" placeholder="详细地址">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> 记住我
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">登录</button>
      </div>
    </div>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-horizontal"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputAccount4"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-2"</span><span class="tag">&gt;</span><span class="pln">账号</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-6 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAccount4"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"电子邮件/手机号/用户名"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputPassword4"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-2"</span><span class="tag">&gt;</span><span class="pln">密码</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-6 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputPassword4"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"密码"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputAddress1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-2"</span><span class="tag">&gt;</span><span class="pln">地址</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-3"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAddress1"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;option&gt;</span><span class="pln">北京</span><span class="tag">&lt;/option&gt;</span><span class="pln">
        </span><span class="tag">&lt;option&gt;</span><span class="pln">上海</span><span class="tag">&lt;/option&gt;</span><span class="pln">
      </span><span class="tag">&lt;/select&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-3"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAddress2"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"市/县"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-4"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAddress3"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"详细地址"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-offset-2 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;label&gt;</span><span class="pln">
          </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 记住我
        </span><span class="tag">&lt;/label&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-offset-2 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="tag">&gt;</span><span class="pln">登录</span><span class="tag">&lt;/button&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span></code></pre></article></section>




<section><header><h3>内联表单</h3></header><article><p>为表单 <code>&lt;form&gt;</code> 添加 <code>.form-inline</code> 类可使内部的表单控件表现为 <code>inline-block</code> 形式，这些表单控件会在允许的宽度内水平排列。仅当视窗口（viewport）宽度至少在 768px 宽度时生效（视窗口宽度再小的话就会使表单控件重新垂直排列）。</p><div class="example">
  <form class="form-inline">
    <div class="form-group">
      <label for="exampleInputEmail3">邮箱</label>
      <input type="text" class="form-control" id="exampleInputEmail3" placeholder="you@me.com">
    </div>
    <div class="form-group">
      <label for="exampleInputInviteCode3">邀请码</label>
      <input type="password" class="form-control" id="exampleInputInviteCode3" placeholder="XXXX-XXXX-XXXX">
    </div>
    <button type="submit" class="btn btn-primary">激活</button>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-inline"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputEmail3"</span><span class="tag">&gt;</span><span class="pln">邮箱</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputEmail3"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"you@me.com"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputInviteCode3"</span><span class="tag">&gt;</span><span class="pln">邀请码</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputInviteCode3"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"XXXX-XXXX-XXXX"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">激活</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span></code></pre></article></section>




<section><header><h3>帮助性文本</h3></header><article><p>使用 <code>&lt;div class="help-block"&gt;</code> 来显示帮助性的文本并添加到表单控件组中。</p><div class="example">
  <div class="form-group">
    <label for="exampleInputAccount2">用户名</label>
    <input type="text" class="form-control" id="exampleInputAccount2" placeholder="输入用来注册的用户名">
    <div class="help-block">用户名可以包含特殊字符及汉字。</div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputAccount2"</span><span class="tag">&gt;</span><span class="pln">账号</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAccount2"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"输入用来注册的用户名"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"help-block"</span><span class="tag">&gt;</span><span class="pln">用户名可以包含特殊字符及汉字。</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>








<section><header><h3>多选框和单选框</h3></header><article><p>多选框和单选框（参见 <a href="#control/checkbox/"><strong>控件 → 多选和单选框</strong></a>）可以直接与表单控件组一起堆叠放置在 <code>&lt;form&gt;</code> 内。</p><div class="example">
  <form>
    <div class="form-group">
      <label for="exampleInputInviteCode1">邀请码</label>
      <input type="text" class="form-control" id="exampleInputInviteCode1" placeholder="请输入邀请码">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 我已阅读并接受用户协议
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="exampleRadioOption1"> 使用默认选项
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="exampleRadioOption1"> 让我自定义选项
      </label>
    </div>
    <button type="submit" class="btn">开始</button>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;form&gt;</span><span class="pln">
  ...
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 我已阅读并接受用户协议
    </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"exampleRadioOption1"</span><span class="tag">&gt;</span><span class="pln"> 使用默认选项
    </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"exampleRadioOption1"</span><span class="tag">&gt;</span><span class="pln"> 让我自定义选项
    </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/form&gt;</span></code></pre><p>内联多选框和内联单选框（参见 <a href="#control/checkbox/1"><strong>控件 → 多选和单选框</strong></a>）可以作为表单控件组的内容。</p><div class="example">
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"> 多选框 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"> 多选框 2
    </label>
    <label class="checkbox-inline">
      <input disabled="" type="checkbox"> 被禁用的多选框
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio" name="radioOptionsExample3"> 单选框 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="radioOptionsExample3"> 单选框 2
    </label>
    <label class="radio-inline">
      <input disabled="" type="radio" name="radioOptionsExample3"> 被禁用的单选框
    </label>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-inline"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 多选框 1
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-inline"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"radioOptionsExample3"</span><span class="tag">&gt;</span><span class="pln"> 单选框 1
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>







<section><header><h3>效验状态</h3></header><article><p>通过为表单控件组添加 <code>.has-warning</code>、<code>.has-error</code>、<code>.has-success</code>类即可应用相应的效验状态样式。这些样式会影响到表单控件组内的 <code>&lt;label&gt;</code>、<code>.form-control</code> 和 <code>.help-block</code> 元素。</p><p>效验状态类也可以添加到多选框（<code>.checkbox</code>）和单选框（<code>.radio</code>）上。</p><div class="example">
  <div class="form-group has-success">
    <label for="inputSuccess1">输入框（success）</label>
    <input type="text" class="form-control" id="inputSuccess1">
    <div class="help-block">这是帮助性提示文本</div>
  </div>
  <div class="form-group has-warning">
    <label for="inputWarning1">输入框（warning）</label>
    <input type="text" class="form-control" id="inputWarning1">
  </div>
  <div class="form-group has-error">
    <label for="inputError1">输入框（error）</label>
    <input type="text" class="form-control" id="inputError1">
  </div>
  <div class="checkbox has-success">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      多选框（success）
    </label>
  </div>
  <div class="checkbox has-warning">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      多选框（warning）
    </label>
  </div>
  <div class="checkbox has-error">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      多选框（error）
    </label>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group has-success"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputSuccess1"</span><span class="tag">&gt;</span><span class="pln">输入框（success）</span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputSuccess1"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"help-block"</span><span class="tag">&gt;</span><span class="pln">这是帮助性提示文本。</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group has-warning"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputWarning1"</span><span class="tag">&gt;</span><span class="pln">输入框（warning）</span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputWarning1"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group has-error"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputError1"</span><span class="tag">&gt;</span><span class="pln">输入框（error）</span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputError1"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox has-success"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"checkboxSuccess"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"option1"</span><span class="tag">&gt;</span><span class="pln">
    多选框（success）
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox has-warning"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"checkboxWarning"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"option1"</span><span class="tag">&gt;</span><span class="pln">
    多选框（warning）
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox has-error"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"checkboxError"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"option1"</span><span class="tag">&gt;</span><span class="pln">
    多选框（error）
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><div class="alert alert-info">
  <h4>使用 JavaScript 进行效验</h4>
  <p>这些效验状态通过添加类名的形式来改变外观，并不能在表单提交时自动应用正确的状态。你仍然需要使用 JavaScript 等其他手段在效验表单数据并应用合适的效验状态类。</p>
</div></article></section>





<section><header><h3>使用 fieldset</h3></header><article><p>使用 <code>&lt;fieldset&gt;</code> 可以将多个表单控件放置在一起进行分组。</p><p>在 <code>&lt;fieldset&gt;</code> 内使用 <code>&lt;legend&gt;</code> 来定义分组标题。</p><div class="example">
  <form>
    <fieldset>
      <legend>账号信息</legend>
      <div class="form-group">
        <label for="exampleInputAccount3">账号</label>
        <input type="text" class="form-control" id="exampleInputAccount3" placeholder="电子邮件/手机号/用户名">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword3">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="">
      </div>
    </fieldset>
    <fieldset>
      <legend>额外内容</legend>
      <div class="form-group">
        <label for="exampleInputInviteCode2">邀请码</label>
        <input type="text" class="form-control" id="exampleInputInviteCode2" placeholder="请输入邀请码">
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="exampleRadioOption2"> 使用默认选项
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="exampleRadioOption2"> 让我自定义选项
        </label>
      </div>
    </fieldset>
    <button type="submit" class="btn">开始</button>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;form&gt;</span><span class="pln">
  </span><span class="tag">&lt;fieldset&gt;</span><span class="pln">
    </span><span class="tag">&lt;legend&gt;</span><span class="pln">账号信息</span><span class="tag">&lt;/legend&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputAccount3"</span><span class="tag">&gt;</span><span class="pln">账号</span><span class="tag">&lt;/label&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAccount3"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"电子邮件/手机号/用户名"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/fieldset&gt;</span><span class="pln">
  </span><span class="tag">&lt;fieldset&gt;</span><span class="pln">
    </span><span class="tag">&lt;legend&gt;</span><span class="pln">额外内容</span><span class="tag">&lt;/legend&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/fieldset&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="tag">&gt;</span><span class="pln">开始</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span></code></pre></article></section>




<section><header><h3>静态文本</h3></header><article><p>在水平排列的表单中，如果需要在标签右侧放置静态文本，只需要为 <code>&lt;p&gt;</code> 添加 <code>.form-control-static</code> 类即可。</p><div class="example">
  <form class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2">用户名</label>
      <div class="col-sm-10">
        <p class="form-control-static">me@example.com</p>
      </div>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword5" class="col-sm-2">密码</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="exampleInputPassword5" placeholder="密码">
      </div>
    </div>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-horizontal"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-2"</span><span class="tag">&gt;</span><span class="pln">用户名</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control-static"</span><span class="tag">&gt;</span><span class="pln">me@example.com</span><span class="tag">&lt;/p&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputPassword5"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-2"</span><span class="tag">&gt;</span><span class="pln">密码</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputPassword5"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"密码"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span></code></pre></article></section>












<section><header><h3>禁用状态和只读状态</h3></header><article><p>只需要表单控件（包括 <code>&lt;input&gt;</code>、<code>&lt;select&gt;</code>、<code>&lt;textarea</code>&gt;）添加 <code>disabled</code> 属性即可禁用状态。处于禁用状态的控件有不同的外观并且不可与用户进行任何交互（包括获得焦点及进行输入等），此时鼠标光标被设置为 <code>not-allowed</code> 类型。表单控件的禁用状态可以参考 <a href="#control/textbox"><strong>控件 → 表单控件</strong></a> 章节。</p><div class="example">
  <form>
    <div class="form-group">
      <label for="exampleDisabledInput">被禁用的输入框</label>
      <input type="text" class="form-control" id="exampleDisabledInput" placeholder="被禁用的输入框" disabled="">
    </div>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleDisabledInput"</span><span class="tag">&gt;</span><span class="pln">被禁用的输入框</span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleDisabledInput"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"被禁用的输入框"</span><span class="pln"> </span><span class="atn">disabled</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><p>当使用了 <code>&lt;fieldset&gt;</code> 时，可以直接为 <code>&lt;fieldset&gt;</code> 添加 <code>disabled</code> 属性，这样处于 <code>&lt;fieldset&gt;</code> 内的所有表单控件都会处于禁用状态。</p><div class="example">
  <form>
    <fieldset disabled="">
      <legend>此 fieldset 内的所有表单控件都被禁用</legend>
      <div class="form-group">
        <label for="exampleInputInviteCode2">邀请码</label>
        <input type="text" class="form-control" id="exampleInputInviteCode2" placeholder="请输入邀请码">
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="exampleRadioOption2"> 使用默认选项
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="exampleRadioOption2"> 让我自定义选项
        </label>
      </div>
      <button type="submit" class="btn">开始</button>
    </fieldset>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;fieldset</span><span class="pln"> </span><span class="atn">disabled</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;legend&gt;</span><span class="pln">此 fieldset 内的所有表单控件都被禁用</span><span class="tag">&lt;/legend&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputInviteCode2"</span><span class="tag">&gt;</span><span class="pln">邀请码</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputInviteCode2"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"请输入邀请码"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"exampleRadioOption2"</span><span class="tag">&gt;</span><span class="pln"> 使用默认选项
    </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"exampleRadioOption2"</span><span class="tag">&gt;</span><span class="pln"> 让我自定义选项
    </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="tag">&gt;</span><span class="pln">开始</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/fieldset&gt;</span></code></pre><p>为表单控件（包括 <code>&lt;input&gt;</code>、<code>&lt;select&gt;</code>、<code>&lt;textarea</code>&gt;）添加 <code>readonly</code> 属性可以为其应用只读状态。处于只读状态的控件外观与处于禁用状态的外观类似，用户无法编辑控件内的内容，但仍然保留默认的鼠标类型，而且可以被激活。</p><div class="example">
  <form>
    <div class="form-group">
      <label for="exampleReadonlyInput">只读的输入框</label>
      <input type="text" class="form-control" id="exampleReadonlyInput" placeholder="只读的输入框" readonly="">
    </div>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleReadonlyInput"</span><span class="tag">&gt;</span><span class="pln">只读的输入框</span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleReadonlyInput"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"只读的输入框"</span><span class="pln"> </span><span class="atn">readonly</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>








<section><header><h3>标记必填项</h3></header><article><p>标记必填项的一种通用方法是在标签上添加星标 <strong class="text-danger">*</strong>，在表单控件组中只需要为 <code>&lt;label&gt;</code> 添加 <code>.required</code> 类即可。</p><div class="example">
  <form>
    <div class="form-group">
      <label for="exampleInputAccount8" class="required">账号</label>
      <input type="text" class="form-control" id="exampleInputAccount8" placeholder="电子邮件/手机号/用户名">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword8" class="required">密码</label>
      <input type="password" class="form-control" id="exampleInputPassword8" placeholder="">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;form&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputAccount8"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"required"</span><span class="tag">&gt;</span><span class="pln">账号</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAccount8"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"电子邮件/手机号/用户名"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputPassword8"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"required"</span><span class="tag">&gt;</span><span class="pln">密码</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputPassword8"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">提交</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span></code></pre><p>星星标记同样适用于水平排列的表单。</p><div class="example">
  <form class="form-horizontal">
    <div class="form-group">
      <label for="exampleInputAccount9" class="col-sm-2 required">账号</label>
      <div class="col-md-6 col-sm-10">
        <input type="text" class="form-control" id="exampleInputAccount9" placeholder="电子邮件/手机号/用户名">
      </div>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword9" class="col-sm-2 required">密码</label>
      <div class="col-md-6 col-sm-10">
        <input type="password" class="form-control" id="exampleInputPassword9" placeholder="密码">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> 记住我
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">登录</button>
      </div>
    </div>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-horizontal"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputAccount9"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-2 required"</span><span class="tag">&gt;</span><span class="pln">账号</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-6 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAccount9"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"电子邮件/手机号/用户名"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputPassword4"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-2 required"</span><span class="tag">&gt;</span><span class="pln">密码</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-6 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputPassword4"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"密码"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-offset-2 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;label&gt;</span><span class="pln">
          </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 记住我
        </span><span class="tag">&lt;/label&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-offset-2 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="tag">&gt;</span><span class="pln">登录</span><span class="tag">&lt;/button&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span></code></pre></article></section>







<section><header><h3>更为紧凑的表单</h3></header><article><p>为表单元素添加 <code>.form-condensed</code> 可以减小表单内的所有控件和文本尺寸及间距，从而获得一个更加紧凑的表单视图。</p><div class="example">
  <form class="form-condensed">
    <div class="form-group">
      <label for="exampleInputAccount6">账号</label>
      <input type="text" class="form-control" id="exampleInputAccount6" placeholder="电子邮件/手机号/用户名">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword6">密码</label>
      <input type="password" class="form-control" id="exampleInputPassword6" placeholder="">
    </div>
    <div class="form-group">
      <label for="exampleInputMoney1">捐赠金额</label>
      <div class="input-group">
        <span class="input-group-addon">￥</span>
        <input type="number" class="form-control" id="exampleInputMoney1" placeholder="最低捐赠金额为 ￥10.00">
        <span class="input-group-addon">.00</span>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-condensed"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputAccount6"</span><span class="tag">&gt;</span><span class="pln">账号</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAccount6"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"电子邮件/手机号/用户名"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputPassword6"</span><span class="tag">&gt;</span><span class="pln">密码</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputPassword6"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputMoney1"</span><span class="tag">&gt;</span><span class="pln">捐赠金额</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;</span><span class="pln">￥</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"number"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputMoney1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"最低捐赠金额为 ￥10.00"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;</span><span class="pln">.00</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">提交</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span></code></pre><p><code>.form-condensed</code> 也可以应用于水平排列的表单。</p><div class="example">
  <form class="form-horizontal form-condensed">
    <div class="form-group">
      <label for="exampleInputAccount7" class="col-sm-2">账号</label>
      <div class="col-md-6 col-sm-10">
        <input type="text" class="form-control" id="exampleInputAccount7" placeholder="电子邮件/手机号/用户名">
      </div>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword7" class="col-sm-2">密码</label>
      <div class="col-md-6 col-sm-10">
        <input type="password" class="form-control" id="exampleInputPassword7" placeholder="密码">
      </div>
    </div>
    <div class="form-group">
      <label for="exampleInputAddress7" class="col-sm-2">地址</label>
      <div class="col-sm-3">
        <select class="form-control" id="exampleInputAddress7">
          <option>北京</option>
          <option>上海</option>
        </select>
      </div>
      <div class="col-sm-3">
        <input type="text" class="form-control" id="exampleInputAddress8" placeholder="市/县">
      </div>
      <div class="col-sm-4">
        <input type="text" class="form-control" id="exampleInputAddress9" placeholder="详细地址">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> 记住我
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">登录</button>
      </div>
    </div>
  </form>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-horizontal form-condensed"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputAccount7"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-2"</span><span class="tag">&gt;</span><span class="pln">账号</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-6 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAccount7"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"电子邮件/手机号/用户名"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputPassword7"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-2"</span><span class="tag">&gt;</span><span class="pln">密码</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-6 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputPassword7"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"密码"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"exampleInputAddress7"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-2"</span><span class="tag">&gt;</span><span class="pln">地址</span><span class="tag">&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-3"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAddress7"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;option&gt;</span><span class="pln">北京</span><span class="tag">&lt;/option&gt;</span><span class="pln">
        </span><span class="tag">&lt;option&gt;</span><span class="pln">上海</span><span class="tag">&lt;/option&gt;</span><span class="pln">
      </span><span class="tag">&lt;/select&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-3"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAddress8"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"市/县"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-4"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputAddress9"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"详细地址"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-offset-2 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;label&gt;</span><span class="pln">
          </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 记住我
        </span><span class="tag">&lt;/label&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-offset-2 col-sm-10"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="tag">&gt;</span><span class="pln">登录</span><span class="tag">&lt;/button&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span></code></pre></article></section></div>

</section>
{/block}